<template lang="html">
  <section class="container">
    <h1>hamburger Icon Animation</h1>
    <!-- row1 -->
    <ul class="row cf">
      <li class="three col">
        <div class="hamburger" id="hamburger-1" @click="click($event)">
          <span class="line"></span>
          <span class="line"></span>
          <span class="line"></span>
        </div>
      </li>
      <li class="three col">
        <div class="hamburger" id="hamburger-2" @click="click($event)">
          <span class="line"></span>
          <span class="line"></span>
          <span class="line"></span>
        </div>
      </li>
      <li class="three col">
        <div class="hamburger" id="hamburger-3" @click="click($event)">
          <span class="line"></span>
          <span class="line"></span>
          <span class="line"></span>
        </div>
      </li>
      <li class="three col">
        <div class="hamburger" id="hamburger-4" @click="click($event)">
          <span class="line"></span>
          <span class="line"></span>
          <span class="line"></span>
        </div>
      </li>
    </ul>
    <!-- row2 -->
    <ul class="row cf">
      <ul class="row cf">
        <li class="three col">
          <div class="hamburger" id="hamburger-5" @click="click($event)">
            <span class="line"></span>
            <span class="line"></span>
            <span class="line"></span>
          </div>
        </li>
        <li class="three col">
          <div class="hamburger" id="hamburger-6" @click="click($event)">
            <span class="line"></span>
            <span class="line"></span>
            <span class="line"></span>
          </div>
        </li>
        <li class="three col">
          <div class="hamburger" id="hamburger-7" @click="click($event)">
            <span class="line"></span>
            <span class="line"></span>
            <span class="line"></span>
          </div>
        </li>
        <li class="three col">
          <div class="hamburger" id="hamburger-8" @click="click($event)">
            <span class="line"></span>
            <span class="line"></span>
            <span class="line"></span>
          </div>
        </li>
      </ul>
    </ul>
    <!-- row3 -->
    <ul class="row cf">
      <ul class="row cf">
        <li class="three col">
          <div class="hamburger" id="hamburger-9" @click="click($event)">
            <span class="line"></span>
            <span class="line"></span>
            <span class="line"></span>
          </div>
        </li>
        <li class="three col">
          <div class="hamburger" id="hamburger-10" @click="click($event)">
            <span class="line"></span>
            <span class="line"></span>
            <span class="line"></span>
          </div>
        </li>
        <li class="three col">
          <div class="hamburger" id="hamburger-11" @click="click($event)">
            <span class="line"></span>
            <span class="line"></span>
            <span class="line"></span>
          </div>
        </li>
        <li class="three col">
          <div class="hamburger" id="hamburger-12" @click="click($event)">
            <span class="line"></span>
            <span class="line"></span>
            <span class="line"></span>
          </div>
        </li>
      </ul>
    </ul>
  </section>
</template>

<script>
export default {
  methods: {
    click (event) {
      let target = event.currentTarget
      let className = target.className.split(' ')
      if (className.indexOf('is-active') > -1) {
        className.splice(className.indexOf('is-active') ,1)
      } else {
        className.push('is-active')
      }
      target.className = className.join(' ')
    }
  }
}
</script>

<style lang="scss" scoped>
html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  font-family: 'Open Sans', sans-serif;
}
a {
  text-decoration: none;
}
p, li, a {
  font-size: 14px;
}

/* GRID */
.one {
  width: 6.866%;
}
.two {
  width: 15.33%;
}
.three {
  width: 23.8%;
}
.four {
  width: 32.26%;
}
.five {
  width: 40.73%;
}
.six {
  width: 49.2%;
}
.seven {
  width: 57.66%;
}
.eight {
  width: 66.13%;
}
.nine {
  width: 74.6%;
}
.ten {
  width: 83.06%;
}
.eleven {
  width: 91.53%;
}
.twelve {
  width: 100%;
}

/* COLUMNS */
.col {
  display: block;
  float: left;
  margin: 1% 0 1% 1.6%;
  &:first-of-type {
    margin-left: 0;
  }
}

.container {
  width: 100%;
  max-width: 940px;
  margin: 0 auto;
  position: relative;
  text-align: center;
}

/* CLEARFIX */
.cf {
  *zoom: 1;
  &:before,
  &:after {
    content: " ";
    display: table;
  }
  &:after {
    clear: both;
  }
}

/* ALL */
.row {
  .three {
    padding: 80px 30px;
    box-sizing: border-box;
    background-color: #2c3e50;
    color: #ecf0f1;
    text-align: center;
  }
}
.hamburger {
  cursor: pointer;
  .line {
    width: 50px;
    height: 5px;
    background-color: #ecf0f1;
    display: block;
    margin: 8px auto;
    transition: all 0.3s ease-in-out;
  }
  &#hamburger-1.is-active {
    .line:nth-child(1) {
      transform: translateY(13px) rotate(45deg);
    }
    .line:nth-child(2) {
      opacity: 0;
    }
    .line:nth-child(3) {
      transform: translateY(-13px) rotate(-45deg);
    }
  }
  &#hamburger-2.is-active {
    .line:nth-child(1) {
      transform: translateY(13px);
    }
    .line:nth-child(3) {
      transform: translateY(-13px);
    }
  }
  &#hamburger-3.is-active {
    .line:nth-child(1),
    .line:nth-child(3) {
      width: 40px;
    }
    .line:nth-child(1) {
      transform: translateX(-10px) rotate(-45deg);
    }
    .line:nth-child(3) {
      transform: translateX(-10px) rotate(45deg);
    }
  }
  &#hamburger-4.is-active {
    .line:nth-child(1),
    .line:nth-child(3) {
      width: 40px;
    }
    .line:nth-child(1) {
      transform: translateX(10px) rotate(45deg);
    }
    .line:nth-child(3) {
      transform: translateX(10px) rotate(-45deg);
    }
  }
  &#hamburger-5 {
    .line:nth-child(2) {
      transition-delay: 0.3s;
    }
    &.is-active {
      transform: rotate(90deg);
      .line:nth-child(2) {
        transition: none;
        opacity: 0;
      }
      .line:nth-child(1),
      .line:nth-child(3) {
        width: 35px;
        transform-origin: right;
      }
      .line:nth-child(1) {
        transform: translateY(15px) rotate(45deg);
      }
      .line:nth-child(3) {
        transform: translateY(-15px) rotate(-45deg);
      }
    }
  }
  &#hamburger-6.is-active {
    transition: all .3s ease-in-out;
    transition-delay: .6s;
    transform: rotate(45deg);
    .line:nth-child(2) {
      width: 0px;
    }
    .line:nth-child(1),
    .line:nth-child(3) {
      transition-delay: 0.3s;
    }
    .line:nth-child(1) {
      transform: translateY(13px);
    }
    .line:nth-child(3) {
      transform: translateY(-13px) rotate(90deg);
    }
  }
  &#hamburger-7.is-active {
    .line:nth-child(1) {
      width: 30px;
    }
    .line:nth-child(2) {
      width: 40px;
    }
    .line {
      transform: rotate(30deg);
    }
  }
  &#hamburger-8.is-active {
    .line:nth-child(1) {
      transform: translateY(13px);
    }
    .line:nth-child(2) {
      opacity: 0;
    }
    .line:nth-child(3) {
      transform: translateY(-13px) rotate(90deg);
    }
  }
  &#hamburger-9 {
    position: relative;
    transition: all .3s ease-in-out;
    &:before {
      content: "";
      position: absolute;
      box-sizing: border-box;
      width: 70px;
      height: 70px;
      border: 5px solid transparent;
      top: calc(50% - 35px);
      left: calc(50% - 35px);
      border-radius: 100%;
      transition: all 0.3s ease-in-out;
    }
    &.is-active {
      transform: rotate(45deg);
      &:before {
        border: 5px solid #ecf0f1;
      }
      .line {
        width: 35px;
        &:nth-child(1) {
          transform: translateY(13px);
        }
        &:nth-child(2) {
          opacity: 0;
        }
        &:nth-child(3) {
          transform: translateY(-13px) rotate(90deg);
        }
      }
    }
  }
  &#hamburger-10 {
    transition: all 0.3s ease-in-out;
    &.is-active {
      transform: rotate(90deg);
      .line {
        &:nth-child(1) {
          width: 30px;
        }
        &:nth-child(2) {
          width: 40px;
        }
      }
    }
  }
  &#hamburger-11 {
    transition: all 0.3s ease-in-out;
    &.is-active {
      animation: smallbig 0.6s forwards;
      .line {
        &:nth-child(1),
        &:nth-child(2),
        &:nth-child(3) {
          transition-delay: 0.2s;
        }
        &:nth-child(1) {
          transform: translateY(13px) rotate(45deg);
        }
        &:nth-child(2) {
          opacity: 0;
        }
        &:nth-child(3) {
            transform: translateY(-13px) rotate(-45deg);
        }
      }
    }
    @keyframes smallbig {
      0, 100% {
        transform: scale(1);
      }
      50% {
        transform: scale(0);
      }
    }
  }
  &#hamburger-12 {
    &.is-active {
      .line {
        &:nth-child(1) {
          opacity: 0;
          transform: translateX(-100%);
        }
        &:nth-child(3) {
          opacity: 0;
          transform: translateX(100%);
        }
      }
    }
  }
}
</style>
